<template>
	<div class="wrap">
		 <el-cascader
		 	clearable
		 	size="mini"
		    :options="goodsType"
		    v-model="selectGoodsType"
		    :props="props"
		    @change="getGoodsType"
		    @active-item-change="fetchGoodsType2">
		 </el-cascader>
	</div>
</template>

<script>
	export default {
		created() {
			this.fetchGoodsType();//获取一级分类菜单
		},
		data() {
			return {
				goodsType: [],			//从服务器获取到的商品一级分类的值
				selectGoodsType: [],	//从服务器获取到的商品分类的值(这是一个副本，与params里面的cateids不能相同，因为这个值必须为[])
				props: {				//获取商品分类数据value，children属性与后台数据格式保持一致
					value: "commodity_cate_id",
					label: "cate_name"
				}
			}
		},
		methods: {
			/*获取一级分类*/
			fetchGoodsType(val) {
				var url = `${this.url}/commodity/cate_get_first_cates.action`;
				this.$http.get(url).then((res) => {
					if( res.data.success ) {
						this.goodsType = res.data.result.rows;
						res.data.result.rows.forEach((_,index)=>{
							this.$set(this.goodsType[index], "children", []);
						});
					}else {
						this.$message({
							type: "error",
							message: res.data.result.errmsg
						});
					}
				});
			},
			/*获取二级分了菜单*/
			fetchGoodsType2(val) {
				var url = `${this.url}/commodity/cate_get_sub_cates.action`;
				var params = {
					commodity_cate_id: val[0]       //val返回的是一个数组，取数组第一个值
				}
				this.$http.get(url, { params }).then((res) => {
					if( res.data.success ) {
						this.goodsType.forEach((value,index)=>{
							if (value.commodity_cate_id === val[0]) {
								this.goodsType[index].children = res.data.result.rows;
							}
						});
					}else {
						this.$message({
							type: "error",
							message: res.data.result.errmsg
						});
					}
				});
			},
			/*获取到商品分类的值*/
			getGoodsType() {
				this.$emit("getclassify",this.selectGoodsType)
			}
		}
	}
</script>

<style lang="scss" scoped>
	.wrap {
		width: 100%;
	}
	.el-cascader {
		width: 100%;
	}
</style>